<template>
  <view>
    <BookingDetails
    title="我的保养"
      @cancelBooked="cancelBooked"
      @toNavigation="toNavigation"
      subTitle="请按预约时间到达维修门店"
    >
      <view class="info_item">
        <view class="left_name">预约时间：</view>
        <view class="info">{{ appoiInfo.appoint_time | displayDate }}</view>
      </view>
      <view class="info_item">
        <view class="left_name">姓名：</view>
        <view class="info">{{ appoiInfo.name }}</view>
      </view>
      <view class="info_item">
        <view class="left_name">手机号码：</view>
        <view class="info">{{ appoiInfo.phone_no }}</view>
      </view>
      <view class="info_item">
        <view class="left_name">车牌号码：</view>
        <view class="info">{{ appoiInfo.car_id }}</view>
      </view>
      <view class="info_item">
        <view class="left_name">里程：</view>
        <view class="info">{{ appoiInfo.curr_kilo }} km</view>
      </view>
      <view class="info_item">
        <view class="left_name">服务类型：</view>
        <view class="info">{{
          appoiInfo.service_type == 0
            ? '维修'
            : appoiInfo.service_type == 1
            ? '保养'
            : '其它'
        }}</view>
      </view>
      <view class="info_item">
        <view class="left_name">服务门店：</view>
        <view class="info">{{ appoiInfo.company }}</view>
      </view>
      <view class="info_item">
        <view class="left_name">服务地址：</view>
        <view class="info">{{ curCenters.address }}</view>
      </view>
    </BookingDetails>
  </view>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  data() {
    return {
      appoiInfo: {},
      // 当前的服务中心
      curCenters: {},
    }
  },
  onLoad(option) {
    this.appoiInfo = JSON.parse(option.appoiInfo)
    this.findData()
    // console.log(JSON.parse(option.appoiInfo))
    // this.updateCompanyId(this.appoiInfo.company_id)
  },
  methods: {
    cancelBooked() {
      // 返回上一页
      uni.navigateBack({
        delta: 1,
      })
    },
    findData() {
      this.curCenters = this.centers.find(
        (item) => item.id == this.appoiInfo.company_id
      )
    },
    toNavigation() {
      let { latitude, longitude, address, text } = this.curCenters
      uni.openLocation({
        latitude: parseFloat(latitude),
        longitude: parseFloat(longitude),
        name: text,
        address: address,
      })
    },
  },
  computed: {
    ...mapState(['centers']),
  },
}
</script>
<style lang="scss" scoped>
.info_item {
  // display: flex;
  // flex-wrap: nowrap;
  // margin-bottom: 10rpx;

  width: 100%;
  font-size: 28rpx;
  margin: 28rpx 0;
  color: #474747;

  .left_name {
    display: flex;
    // width: 76px;
    // align-items: center;
    // justify-content: flex-end;
    display: inline-block;
    width: 28%;
    vertical-align: top;
  }

  .info {
    display: inline-block;
    width: 72%;
    vertical-align: middle;
    // flex: 1;
    // margin: 6rpx 0;
    // padding-left: 5rpx;
  }
}
</style>
